<template>
  <el-main>
    <div><z-header></z-header></div>
    <div class="containe">
      <!-- 第一行 选择适合的多会产品 -->
      <div class="bg-style">
        <div class="middle hello" v-for="item in paragraph1" :key="item">
          <h1 v-if="item.text1">{{item.text1}}</h1>
            <p v-if="item.text2">{{item.text2}}</p>
            <div class="active">
              <el-col :span="3"><el-card class="btn1" shadow="hover">联系销售</el-card></el-col>
              <el-col :span="3"><el-card class="btn2" shadow="hover">帮我推荐</el-card></el-col>
            </div>
        </div>
      </div>
      <!-- 第二行 对比多会产品开始 -->
      <div class="compare">
        <div class="middle padding clearfix">
          <div class="h2" v-for="item in list1" :key="item"><h2 v-if="item.text1">{{item.text1}}</h2></div>

          <div class="edition clearfix">
            <div class="left">
              <div class="left-herder" v-for="item in title" :key="item">
                <h2 v-if="item.text1">{{item.text1}}</h2>
                <p v-if="item.p1">{{item.p1}}</p>
              </div>
              <div class="left-body" v-for="item in title" :key="item">
                <div class="h2"><h2 v-if="item.text2">{{item.text2}} <span v-if="item.p2">{{item.p2}}</span></h2></div>
                <div class="body-del">
                  <span class="money" v-if="item.text3">{{item.text3}}</span>
                  <span class="discount" style="margin-bottom: 27px;" v-if="item.p3">{{item.p3}}</span>
                </div>
              </div>
              <ul class="clearfix">
                <li v-for="(itme, index) in list1" :key="index">
                  <img v-if="itme.img" :src="itme.img">{{itme.text}}<strong>{{itme.active}}</strong>{{ itme.text2 }}
                </li>
              </ul>
              <div class="active-btn">
                <router-link to="/"><button class="btn">选择标准版</button></router-link>
              </div>
            </div>
          </div>

          <div class="edition clearfix">
            <div class="left">
              <div class="left-herder" v-for="item in title2" :key="item">
                <h2 v-if="item.text1">{{item.text1}}</h2>
                <p v-if="item.p1">{{item.p1}}</p>
              </div>
              <div class="left-body" v-for="item in title2" :key="item">
                <div class="h2"><h2 v-if="item.text2">{{item.text2}} <span v-if="item.p2">{{item.p2}}</span></h2></div>
                <div class="body-del">
                  <span class="money" v-if="item.text3">{{item.text3}}</span>
                  <span class="discount" style="margin-bottom: 27px;" v-if="item.p3">{{item.p3}}</span>
                </div>
              </div>
              <ul class="clearfix">
                <li v-for="(itme, index) in list2" :key="index">
                  <img v-if="itme.img" :src="itme.img">{{ itme.text }}<strong>{{itme.active}}</strong>{{ itme.text2 }}
                </li>
              </ul>
              <div class="active-btn">
                <router-link to="/"><button class="btn btn1">选择标准版</button></router-link>
              </div>
            </div>
          </div>

          <div class="edition clearfix">
            <div class="left">
              <div class="left-herder" v-for="item in title3" :key="item">
                <h2 v-if="item.text1">{{item.text1}}</h2>
                <p v-if="item.p1">{{item.p1}}</p>
              </div>
              <div class="left-body" v-for="item in title3" :key="item">
                <div class="h2"><h2 v-if="item.text2">{{item.text2}} <span v-if="item.p2">{{item.p2}}</span></h2></div>
                <div class="body-del">
                  <span class="money" v-if="item.text3">{{item.text3}}</span>
                  <span class="discount" style="margin-bottom: 27px;" v-if="item.p3">{{item.p3}}</span>
                </div>
              </div>
              <ul class="clearfix">
                <li v-for="(itme, index) in list3" :key="index">
                  <img v-if="itme.img" :src="itme.img">{{ itme.text }}<strong>{{itme.active}}</strong>{{ itme.text2 }}
                </li>
              </ul>
              <div class="active-btn">
                <router-link to="/"><button class="btn">选择标准版</button></router-link>
              </div>
            </div>
          </div>
          <p style="color: #666; font-size: 14px; text-align: right;margin-bottom: 17px;" v-for="item in list4" :key="item">{{item.text}}</p>
        </div>
      </div>

      <!-- 根据用量为我推荐产品开始 -->
      <div class="bg-style">
          <div class="middle ">
            <div class="clearfix" v-for="item in list5" :key="item">
              <h2 v-if="item.text">{{item.text}}</h2>
              <div class="form"></div>
              <div class="form2">
                <div class="form form-left"></div>
                <div class="form form-left form-right"></div>
              </div>
            </div>
          </div>
      </div>

      <!-- 根据功能需求为我推荐产品 -->
      <div class="compare">
        <div class="middle">
          <h2>根据功能需求为我推荐产品</h2>
          <div class="one-line catalog" v-for="(item,index) in con" :key="index">
            <div class="Small-card">
              <h3>{{item.title.h3}}</h3>
              <p>{{item.title.p}}</p>
            </div>
            <div class="Small-card">
              <h3>{{item.raph.h3}}</h3>
              <p>{{item.raph.p}}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 还未决定? 我们的活动专家可以帮助你 -->
      <div class="san">
        <div class="bg-style">
          <div class="middle contact" v-for="item in end" :key="item">
            <h2 v-if="item.text">{{item.text}}</h2>
            <router-link to="/" v-if="item.text1"><span class="bt">{{item.text1}}</span></router-link><p v-if="item.text2">{{item.text2}}</p><strong v-if="item.text3">{{item.text3}}</strong>
            <p class="p" v-if="item.text4">{{item.text4}}</p>
          </div>
        </div>
      </div>
    </div>
    <div><z-footer></z-footer></div>
  </el-main>
</template>

<script>
import zHeader from '@/views/index/components/header.vue'
import zFooter from '@/views/index/components/footer.vue'
export default {
  components: { zHeader, zFooter },
  data () {
    return {
      paragraph1: [
        { text1: '选择适合的多会产品', text2: '多会为不同的应用场景设计了专属的产品方案，请根据您的应用场景选择适合的多会产品。' }
      ],
      title: [
        { text1: '标准版', p1: '适合低频小型活动' },
        { text2: '299', p2: '元每年' },
        { text3: '￥488', p3: '年付优惠' }
      ],
      title2: [
        { text1: '高级版', p1: '适合经常举办中小型活动' },
        { text2: '1,799', p2: '元每年' },
        { text3: '￥3,588', p3: '年付优惠' }
      ],
      title3: [
        { text1: '企业版', p1: '适合专业品牌主办方' },
        { text2: '9,999', p2: '元每年' },
        { text3: '￥1,3996', p3: '年付优惠' }
      ],
      list1: [
        { text1: '对比多会产品' },
        { img: require('@/assets/img/check.png'), text: '可发布', active: '无限', text2: '个活动' },
        { img: require('@/assets/img/check_gray.png'), text: '每个活动最多设置3个票种' },
        { img: require('@/assets/img/check_gray.png'), text: '单个票种最多可报名100人' },
        { img: require('@/assets/img/check_gray.png'), text: '单个票种最高票价1000元' },
        { img: require('@/assets/img/check.png'), text: '每月免费赠送100条短信额度' },
        { img: require('@/assets/img/check.png'), text: '微信提现免费' },
        { img: require('@/assets/img/check.png'), text: '免费票完全免费' },
        { img: require('@/assets/img/check_gray.png'), text: '付费票手续费为1元+1%' },
        { img: require('@/assets/img/check.png'), text: '导入导出报名表单' }
      ],
      list2: [
        { img: require('@/assets/img/check.png'), text: '可发布', active: '无限', text2: '个活动' },
        { img: require('@/assets/img/check.png'), text: '每个活动最多可报名', active: '无限', text2: '人' },
        { img: require('@/assets/img/check_gray.png'), text: '单个票种限制3000张库存' },
        { img: require('@/assets/img/check_gray.png'), text: '单个票种最高票价3000元' },
        { img: require('@/assets/img/check.png'), text: '每月免费赠送', active: '500', text2: '条短信额度' },
        { img: require('@/assets/img/check.png'), text: '微信提现免费' },
        { img: require('@/assets/img/check.png'), text: '免费票完全免费' },
        { img: require('@/assets/img/check.png'), text: '付费票手续费为', active: '1%' },
        { img: require('@/assets/img/check.png'), text: '导入导出报名表单' },
        { img: require('@/assets/img/check.png'), text: '多场次功能' },
        { img: require('@/assets/img/check.png'), text: '活动列表及巡演功能单' }
      ],
      list3: [
        { img: require('@/assets/img/check.png'), text: '可发布', active: '无限', text2: '个活动' },
        { img: require('@/assets/img/check.png'), text: '每个活动最多可报名', active: '无限', text2: '人' },
        { img: require('@/assets/img/check.png'), text: '票种价格', active: '无限制' },
        { img: require('@/assets/img/check.png'), text: '票种库存', active: '无限制' },
        { img: require('@/assets/img/check.png'), text: '每月免费赠送', active: '1000', text2: '条短信额度' },
        { img: require('@/assets/img/check.png'), text: '票款无需提现', active: '直接到帐' },
        { img: require('@/assets/img/check.png'), text: '免费票完全免费' },
        { img: require('@/assets/img/check.png'), text: '付费票', active: '不收取', text2: '手续费，由支付渠', text3: '道直接收取' },
        { img: require('@/assets/img/check.png'), text: '导入导出报名表单' },
        { img: require('@/assets/img/check.png'), text: '多场次功能' },
        { img: require('@/assets/img/check.png'), text: '活动列表及巡演功能单' },
        { img: require('@/assets/img/check.png'), text: '生成独立 ', active: '活动小程序' },
        { img: require('@/assets/img/check.png'), text: '绑定', active: '服务号', text2: '，报名即关注' },
        { img: require('@/assets/img/check.png'), text: '隐藏多会品牌' }
      ],
      list4: [
        { text: '* 多会企业版使用商户自有的支付商户收款，多会不按票款收取手续费和服务费。但支付渠道（微信支付或支付宝）可能直接向您收取 0.6% 的手续费，具体费率以您和支付渠道签订的协议为准。' }
      ],

      list5: [
        { text: '根据用量为我推荐产品' }
      ],

      options1: [
        { value: '1', label: '1' },
        { value: '3', label: '2~4' },
        { value: '5', label: '5~10' },
        { value: '7', label: '10' }
      ],
      value1: '',

      options2: [
        { value: '13', label: '10~50' },
        { value: '23', label: '50~100' },
        { value: '25', label: '100~500' },
        { value: '27', label: '500~1000' },
        { value: '28', label: '1000+' }
      ],
      value2: '',

      options3: [
        { value: '32', label: '0' },
        { value: '33', label: '10~50' },
        { value: '35', label: '50~100' },
        { value: '38', label: '100~500' },
        { value: '39', label: '500+' }
      ],
      value3: '',

      list6: [
        { text1: '我们推荐您使用', text2: '对比其他活动平台，预计每月可以节省', text3: '元!' }
      ],
      con: [
        {
          title: {
            h3: '资金实时到帐，无需提现',
            p: '使用自有的收款账号，费率更低，实时到帐。'
          },
          raph: {
            h3: '独立品牌展示',
            p: '隐藏多会品牌，完整独立的品牌展示。'
          }
        },
        {
          title: {
            h3: '活动开始短信提醒',
            p: '在活动开始前向参与者群发短信提醒。'
          },
          raph: {
            h3: '离线快速签到',
            p: '提供专用签到 APP，没有网络同样快速签到。'
          }
        },
        {
          title: {
            h3: '在线选座',
            p: '上传座位表，购票时可直接在线选座。'
          },
          raph: {
            h3: '报名时关注公众号',
            p: '生产专属报名二维码，先关注后报名。'
          }
        },
        {
          title: {
            h3: '子账号权限管理',
            p: '为其他团队成员创建子账号，设置管理权限。'
          },
          raph: {
            h3: '分渠道统计',
            p: '创建活动发布渠道，设置渠道专属票，生成统计。'
          }
        }
      ],

      end: [
        { text: '还未决定？我们的活动专家可以帮助你' },
        { text1: '在线咨询', text2: '或致电', text3: '021-80370533', text4: '周一至周六 9:00 至 21:00' }
      ]
    }
  }
}
</script>

<style>
@import "~@/assets/css/product.css";
@import "~@/assets/css/template.css";
@import "~@/assets/css/public.css";
</style>;
